import { Button, Image, Modal, Table } from "antd";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import type { TableProps } from "antd";
import {
  changeModal,
  changeParams,
  getGameAsync,
} from "@/store/game/gameSlice";
import { deleteGame } from "@/store/game/gameAPI";

export interface DataType {
  id: number;
  channel: number;
  game_name: string;
  hits: number;
  icon: string;
  image: string;
  recommend: number;
  sort_value: number;
  url: string;
  class_id: number;
}

export default function MTable() {
  const dispatch = useAppDispatch();
  const { params, table } = useAppSelector((state) => state.game);
  const {
    config: { data: { data: { user_channel_list = [], minigame_class = [] } = {} } = {} } = {},
  } = useAppSelector((state) => state.app);

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "所在分类",
      dataIndex: "class_id",
      key: "class_id",
      align: "center",
      render: text => minigame_class?.find?.(i => i.value === text)?.label
    },
    {
      title: "渠道",
      dataIndex: "channel",
      key: "channel",
      align: "center",
      render: (text) =>
        user_channel_list?.find?.((i) => i.value === text)?.label,
    },
    {
      title: "游戏名字",
      dataIndex: "game_name",
      key: "game_name",
      align: "center",
    },
    {
      title: "游戏链接",
      dataIndex: "url",
      key: "url",
      align: "center",
    },
    {
      title: "图标",
      dataIndex: "icon",
      key: "icon",
      align: "center",
      render: (text) => <Image src={text} width={40} height={40} />,
    },
    {
      title: "图片",
      dataIndex: "image",
      key: "image",
      align: "center",
      render: (text) => <Image src={text} width={60} height={40} />,
    },
    {
      title: "是否推荐",
      dataIndex: "recommend",
      key: "recommend",
      align: "center",
      render: (text) => (
        <>
          {text === 1 && "是"}
          {text === 2 && "否"}
        </>
      ),
    },
    {
      title: "排序值",
      dataIndex: "sort_value",
      key: "sort_value",
      align: "center",
    },
    {
      title: "操作",
      dataIndex: "opt",
      key: "opt",
      align: "center",
      render: (_text, record) => {
        return (
          <Button.Group size="small">
            <Button
              type="primary"
              ghost
              onClick={() => {
                dispatch(
                  changeModal({
                    type: "update",
                    open: true,
                    record,
                  })
                );
              }}
            >
              编辑
            </Button>
            <Button
              type="primary"
              danger
              onClick={() => {
                Modal.confirm({
                  title: "确认删除吗？",
                  onOk: () =>
                    new Promise<void>((resolve, reject) => {
                      deleteGame({
                        game_id: record.id,
                      })
                        .then(() => {
                          resolve();
                          dispatch(getGameAsync({ ...params }));
                        })
                        .catch(reject);
                    }),
                });
              }}
            >
              删除
            </Button>
          </Button.Group>
        );
      },
    },
  ];

  return (
    <Table
      columns={columns}
      scroll={{ x: "max-content" }}
      bordered
      loading={table.status === "loading"}
      pagination={{
        total: table?.data?.data?.total,
        current: params?.page,
        pageSize: params?.page_size,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total: number, range: [number, number]): string =>
          `${range[0]}-${range[1]}条/共${total}条`,
        onChange: (page: number, pageSize: number): void => {
          dispatch(changeParams({ page, page_size: pageSize }));
          dispatch(
            getGameAsync({
              ...params,
              page,
              page_size: pageSize,
            })
          );
        },
      }}
      dataSource={table?.data?.data?.page_data || []}
      size="small"
      rowKey="id"
    />
  );
}
